<template>
  <div ref="chart" class="plotly-chart"></div>
</template>

<script setup>
import { onMounted, ref,defineExpose } from 'vue'
import Plotly from 'plotly.js-dist'

// 获取 DOM 元素的引用
const chart = ref(null)

const props = defineProps({
  graphDataList: {
    type: Array,
    default: () => [],
  },
  
})
function getRandomColor() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r},${g},${b})`;
}
const childMethod = () => {
 var data = [];
  
  props.graphDataList.forEach((item,index) => {
   
  
      var obj = {

        
        y: item.value,
        type: 'violin',
        name: item.sub,
        box: { visible: true },
        // points: 'all',
        // pointpos: 0,
        // jitter: 0.1,
        hoverinfo: 'none',
        // line: { color: 'black' },
        marker: {
          showscale: true,
           color: colors[index % colors.length] }, // 使用颜色数组中的颜色
        // box_visible: true, // 内部箱体是否显示
        // line_color: 'red', // 线条颜色
        // meanline_visible: true, // 是否显示中线
        fillcolor: getRandomColor() ,//'seagreen', // 填充色
        opacity: 0.5, // 透明度
        meanline: { visible: false },
        mode: 'lines+markers',
        
        
      }
      data.push(obj);
    })
  

  const config = {
    scrollZoom: false,
    editable: false,
    staticPlot: false,
    toImageButtonOptions: {
      format: 'svg', // one of png, svg, jpeg, webp
      filename: 'custom_image',
      height: 500,
      width: 700,
      scale: 1, // Multiply title/legend/axis/canvas sizes by this factor
    },
  }
  // 配置图表布局
  const layout = {
    title: 'Violin Plot of CD14 Expression Across Cell Types',
    xaxis: { title: 'Cell Types' },
    yaxis: { title: 'CD14 Expression Level' , range: [0, null] },
    violingap: 0,
    violingroupgap: 0,
    violinmode: 'spanmode',
    margin: { l: 80, r: 50, b: 200, t:0 },
    legend: {
        y: 0.9 // 调整此值（如从默认的 1.0 改为 0.8），值越小图例越靠下
      }
  }
  // const plotlyData = generateData()
  
  // 绘制图表
  Plotly.newPlot(chart.value, data, layout, config)
}

// 数据准备
const data = [
  { cluster: 'cDC1_CLEC9A', mean: 0.02874836, sd: 0.09058539 },
  { cluster: 'cDC2_CD1C', mean: 0, sd: 0 },
  { cluster: 'cDC3_LAMP3', mean: 0.01868285, sd: 0.08372057 },
  { cluster: 'Macro_C1QC', mean: 0.4954989, sd: 0.31980613 },
  { cluster: 'Macro_ISG15', mean: 0.51165408, sd: 0.33233599 },
  { cluster: 'Macro_PPARG', mean: 0.26164049, sd: 0.24260333 },
  { cluster: 'Macro_SPP1', mean: 0, sd: 0 },
  { cluster: 'Mast_KIT', mean: 0.04871543, sd: 0.13754266 },
  { cluster: 'Mono_CD14', mean: 0.58919304, sd: 0.29484695 },
  { cluster: 'Mono_CD16', mean: 0.12769527, sd: 0.23333887 },
  { cluster: 'pDC_LILRA4', mean: 0.07131063, sd: 0.16709584 },
]

// 颜色数组
const colors = [
  '#1f77b4',
  '#ff7f0e',
  '#2ca02c',
  '#d62728',
  '#9467bd',
  '#8c564b',
  '#e377c2',
  '#7f7f7f',
  '#bcbd22',
  '#17becf',
  '#aec7e8',
]

// 模拟数据分布
function generateData() {
  return data.map((item, index) => ({
    y: [1, 2, 3, 4, 5, 6],
    type: 'violin',
    name: item.cluster,
    box: { visible: true },
    points: 'all',
    pointpos: 0,
    jitter: 0.1,
    line: { color: 'black' },
    marker: { color: colors[index % colors.length] }, // 使用颜色数组中的颜色
    box_visible: true, // 内部箱体是否显示
    line_color: 'red', // 线条颜色
    meanline_visible: true, // 是否显示中线
    fillcolor: 'seagreen', // 填充色
    opacity: 0.5, // 透明度
    meanline: { visible: true },
  }))
}

onMounted(() => {
  childMethod()
})

// 向父组件暴露方法
defineExpose({
  childMethod,
})
</script>

<style scoped>
.plotly-chart {
  width: 100%;
  height: 100%;
}
</style>
